<template>
  <div>
    <div class="big-box">
      <div class="container">
        <div class="small-box" v-for="(item, index) of treeData" :key="index">
          <div
            class="grade-box"
            :style="{
              height: title_height + 'px',
              marginTop: title_marginTop,
              margin: box_margin,
              width: box_width,
              background: rank_backColor[item.titleRank],
            }"
            v-if="item.title"
          >
            {{ item.titleRank }}
          </div>
          <div
            class="data-box"
            :style="{
              height: box_height,
              margin: box_margin,
              width: box_width,
            }"
            style="background-color: rgb(6, 45, 102)"
            v-if="item.title_name"
          >
            <div>排名</div>
            <div>区县</div>
            <div>得分</div>
            <div>比率</div>
          </div>

          <div
            class="data-box"
            :style="{
              height: box_height,
              margin: box_margin,
              width: box_width,
              backgroundColor:
                item.order % 2 === 0 ? 'rgb(13, 53, 105)' : 'rgb(20, 59, 114)',
            }"
            v-if="item.title === false"
          >
            <div>{{ item.order }}</div>
            <div>
              {{ item.district_name }}
            </div>
            <div>{{ Math.round(item.target_ratio * 100) / 100 }}</div>
            <div>{{ item.target_score }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";

export default {
  data() {
    return {
      treeData: [],
      box_margin: null,
      box_height: null,
      box_width: null,
      title_marginTop: null,
      title_height: 30,
      bigBox_height: 832,
      bigBox_width: 972,
      rank_backColor: {
        A: "rgb(30, 164, 101)",
        B: "rgb(57,119,178)",
        C: "rgb(226,196,40)",
        D: "rgb(230,145,23)",
        E: "rgb(117,67,50)",
      },
    };
  },
  mounted() {
    this.getInitData();
  },
  computed: {},
  methods: {
    getInitData() {
      $.getJSON("../data/txt/data2.json", (data) => {
        // 数据预处理
        let order = 1,
          numTitle = 0;
        try {
          for (let j = 0; j < data.length; j++) {
            this.treeData.push({
              titleRank: data[j].district[0].target_level,
              title: true,
              title_name: false,
            });
            numTitle++;
            this.treeData.push({
              title_name: true,
            });
            for (let i = 0; i < data[j].district.length; i++) {
              this.treeData.push({
                ...data[j].district[i],
                title: false,
                order: order,
                title_name: false,
              });
              order++;
            }
          }
        } catch {
          for (let j = 0; j < data.length; j++) {
            this.treeData.push({
              titleRank: data[j].level,
              title: true,
              title_name: false,
            });
            this.treeData.push({
              title_name: true,
            });
            for (let i = 0; i < data[j].length; i++) {
              this.treeData.push({
                ...data[j],
                title: false,
                order: order,
                title_name: false,
              });
              order++;
            }
          }
        }

        // 初步计算宽高间隔
        let dataLength = this.treeData.length;
        this.box_height =
          (this.bigBox_height * 3 - numTitle * this.title_marginTop) /
          dataLength;
        this.box_margin = Math.round(this.box_height * 0.15);
        this.box_width = this.bigBox_width / 3 - this.box_margin * 2;
        this.title_marginTop = this.box_height - this.title_height;

        // 第二列添加title_name
        let orginLen = this.treeData.length;
        for (let i = 1; i < orginLen; i++) {
          if (this.box_height * i > this.bigBox_height - this.title_marginTop) {
            let tempLen =
              ((this.bigBox_height - this.title_marginTop * numTitle) * 3) /
              (dataLength + 1);
            if (tempLen * i > this.bigBox_height - this.title_marginTop) {
              this.treeData.splice(i - 1, 0, {
                title_name: true,
              });
              this.box_height = tempLen;
            } else {
              this.treeData.splice(i + 1, 0, {
                title_name: true,
              });
              this.box_height = tempLen;
            }
            dataLength = this.treeData.length;
            break;
          }
        }
        // 第三列添加title_name
        orginLen = this.treeData.length;
        for (let i = 1; i < orginLen; i++) {
          if (
            this.box_height * i >
            (this.bigBox_height - this.title_marginTop) * 2
          ) {
            let tempLen =
              ((this.bigBox_height - numTitle * this.title_marginTop) * 3) /
              dataLength;
            if (tempLen * i > this.bigBox_height - this.title_marginTop) {
              this.treeData.splice(i - 1, 0, {
                title_name: true,
              });
              this.box_height = tempLen;
            } else {
              this.treeData.splice(i, 0, {
                title_name: true,
              });
              this.box_height = tempLen;
            }
            dataLength = this.treeData.length;
            break;
          }
        }

        // 当第二列或者第三列开头 title_name遇到title时 删除title_name
        for (let i = 0; i < this.treeData.length; i++) {
          if (this.treeData[i].title_name) {
            if (this.treeData[i + 1].title) {
              this.treeData.splice(i, 1);
              dataLength = this.treeData.length + 2;
              this.box_height =
                (this.bigBox_height * 3 - numTitle * this.title_marginTop) /
                dataLength;
            }
          }
        }

        this.title_marginTop = this.box_height - this.title_height;
        this.title_marginTop = this.title_marginTop + "px";
        this.box_height = this.box_height + "px";
        this.box_margin = "0 " + this.box_margin + "px";
        this.box_width = this.box_width + "px";
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.big-box {
  position: absolute;
  right: 20%;
  top: 3%;
  transform: translate(-50% -50%);
  width: 972px;
  height: 832px;
  background-color: rgb(6, 45, 102);

  .container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
  }

  .data-box {
    display: flex;
    flex-direction: row;
    color: white;

    div {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    div:nth-child(1) {
      width: 20%;
    }

    div:nth-child(2) {
      width: 40%;
    }
    div:nth-child(3) {
      width: 20%;
    }
    div:nth-child(4) {
      width: 20%;
    }
  }

  .small-box:nth-child(odd) {
    // background-color: rgb(13, 53, 105);
  }

  .small-box:nth-child(even) {
    // background-color: rgb(20, 59, 114);
  }
}

.grade-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 33%;
  color: white;
  background-color: rgb(30, 164, 101);
  font-size: 24px;
  margin-top: 20px !important;
}
</style>